<template>

<!--  <div>-->
<!--    <div id="container"></div>-->
<!--    <div>-->
<!--      <input type="text" v-model="searchKeyword" placeholder="出发地">-->
<!--      <button @click="searchLocation">搜索</button>-->
<!--      <br>-->
<!--      {{departure}}-->
<!--      <select id="cars" v-model="departure">-->
<!--        <option value="">请选择</option>-->
<!--        <option v-for="car in address" :key="car.id" :value="car">{{ car.name }}</option>-->
<!--      </select>-->
<!--    </div>-->
<!--    <div>-->
<!--      <input type="text" v-model="destinationsearchKeyword" placeholder="输入目的的">-->
<!--      <button @click="destinationsearchLocation">搜索</button>-->
<!--      <br>-->
<!--      {{destination}}-->
<!--      <select id="cars" v-model="destination">-->
<!--        <option value="">请选择</option>-->
<!--        <option v-for="car in address1" :key="car.id" :value="car">{{ car.name }}</option>-->
<!--      </select>-->
<!--    </div>-->
<!--  </div>-->


  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="接单司机id" prop="driverId">
        <el-input
            v-model="queryParams.driverId"
            placeholder="请输入接单司机id"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="Plus"
            @click="handleAdd"
            v-hasPermi="['orders:RealTime:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="success"
            plain
            icon="Edit"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['orders:RealTime:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['orders:RealTime:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['orders:RealTime:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="RealTimeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="实时单id" align="center" prop="realtimeId" />
      <el-table-column label="用户id" align="center" prop="userId" />
      <el-table-column label="用户手机号" align="center" prop="userTel" />
      <el-table-column label="订单号" align="center" prop="orderCard" />
      <el-table-column label="始发地" align="center" prop="startPoint" />
      <el-table-column label="始发地经度" align="center" prop="startPointLongitude" />
      <el-table-column label="始发地纬度" align="center" prop="startPointLatitude" />
      <el-table-column label="目的地" align="center" prop="destination" />
      <el-table-column label="目的地经度" align="center" prop="destinationLongitude" />
      <el-table-column label="目的地纬度" align="center" prop="destinationLatitude" />
      <el-table-column label="距离" align="center" prop="distance" />
      <el-table-column label="接单司机id" align="center" prop="driverId" />
      <el-table-column label="接单时间" align="center" prop="startTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预估价格" align="center" prop="predictPrice" />
      <el-table-column label="实际价格" align="center" prop="realPrice" />
      <el-table-column label="订单状态1：待接单2：已接单3：已上车4：待支付5：已支付6；已结束7：待评价" align="center" prop="orderStatus" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['orders:RealTime:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['orders:RealTime:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <!-- 添加或修改实时订单对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="RealTimeRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="userTel">
          <el-input v-model="form.userTel" placeholder="请输入用户手机号" />
        </el-form-item>
        <el-form-item label="订单号" prop="orderCard">
          <el-input v-model="form.orderCard" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="始发地" prop="startPoint">
          <el-input v-model="form.startPoint" placeholder="请输入始发地" />
        </el-form-item>
        <el-form-item label="始发地经度" prop="startPointLongitude">
          <el-input v-model="form.startPointLongitude" placeholder="请输入始发地经度" />
        </el-form-item>
        <el-form-item label="始发地纬度" prop="startPointLatitude">
          <el-input v-model="form.startPointLatitude" placeholder="请输入始发地纬度" />
        </el-form-item>
        <el-form-item label="目的地" prop="destination">
          <el-input v-model="form.destination" placeholder="请输入目的地" />
        </el-form-item>
        <el-form-item label="目的地经度" prop="destinationLongitude">
          <el-input v-model="form.destinationLongitude" placeholder="请输入目的地经度" />
        </el-form-item>
        <el-form-item label="目的地纬度" prop="destinationLatitude">
          <el-input v-model="form.destinationLatitude" placeholder="请输入目的地纬度" />
        </el-form-item>
        <el-form-item label="距离" prop="distance">
          <el-input v-model="form.distance" placeholder="请输入距离" />
        </el-form-item>
        <el-form-item label="接单司机id" prop="driverId">
          <el-input v-model="form.driverId" placeholder="请输入接单司机id" />
        </el-form-item>
        <el-form-item label="接单时间" prop="startTime">
          <el-date-picker clearable
                          v-model="form.startTime"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择接单时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable
                          v-model="form.endTime"
                          type="date"
                          value-format="YYYY-MM-DD"
                          placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预估价格" prop="predictPrice">
          <el-input v-model="form.predictPrice" placeholder="请输入预估价格" />
        </el-form-item>
        <el-form-item label="实际价格" prop="realPrice">
          <el-input v-model="form.realPrice" placeholder="请输入实际价格" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>


</template>

<!--setup name="RealTime"-->
<script>

import { ref } from 'vue';
import axios from 'axios';

// export default {
//   name: 'MapComponent',
//   data() {
//     return {
//       departure:{},
//       destination:{},
//       address:[],
//       address1:[],
//       map: null,
//       marker: null,
//       autoComplete: null,
//       searchKeyword: '',
//       destinationsearchKeyword: '',
//       apiKey: '026ef6cc4bb68e803eb48d86fa63d92d', // 替换成你的地图API Key
//     };
//   },
//   mounted() {
//     this.initMap();
//   },
//   methods: {
//     initMap() {
//       let longitude = 111.160735;
//       let latitude = 37.056293;
//
//       this.map = new AMap.Map('container', {
//         viewMode: '2D',
//         zoom: 14,
//         center: [longitude, latitude],
//         resizeEnable: true
//       });
//
//       this.marker = new AMap.Marker({
//         position: [longitude, latitude],
//       });
//
//       this.map.add(this.marker);
//
//       this.map.on('click', this.mapClick);
//
//       AMap.plugin("AMap.AutoComplete", () => {
//         this.autoComplete = new AMap.AutoComplete();
//       });
//     },
//     mapClick(e) {
//       let location = new AMap.LngLat(e.lnglat.lng, e.lnglat.lat);
//       this.map.setCenter(location);
//       this.marker.setPosition(location);
//     },
//     destinationsearchLocation() {
//       if (this.destinationsearchKeyword.trim() === '') return;
//
//       this.autoComplete.search(this.destinationsearchKeyword, (status, result) => {
//         if (status === 'complete') {
//           if (result && result.tips && result.tips.length > 0) {
//             console.log(result)
//             this.address1=result.tips
//             let location = result.tips[0].location;
//             this.map.setCenter(location);
//             this.marker.setPosition(location);
//           }
//         }
//       });
//     },
//     searchLocation() {
//       if (this.searchKeyword.trim() === '') return;
//
//       this.autoComplete.search(this.searchKeyword, (status, result) => {
//         if (status === 'complete') {
//           if (result && result.tips && result.tips.length > 0) {
//             console.log(result)
//             this.address=result.tips
//             let location = result.tips[0].location;
//             this.map.setCenter(location);
//             this.marker.setPosition(location);
//           }
//         }
//       });
//     },
//     getAddress(lng, lat) {
//       axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=${this.apiKey}&location=${lng},${lat}`)
//           .then(res => {
//             if (res.data.regeocode) {
//               console.log(res.data.regeocode.formatted_address);
//             }
//           })
//           .catch(error => {
//             console.error('Error fetching address:', error);
//           });
//     }
//   }
// }

import { listRealTime, getRealTime, delRealTime, addRealTime, updateRealTime } from "@/api/orders/RealTime";

const { proxy } = getCurrentInstance();

const RealTimeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userId: null,
    userTel: null,
    orderCard: null,
    startPoint: null,
    startPointLongitude: null,
    startPointLatitude: null,
    destination: null,
    destinationLongitude: null,
    destinationLatitude: null,
    distance: null,
    driverId: null,
    startTime: null,
    endTime: null,
    predictPrice: null,
    realPrice: null,
    orderStatus: null
  },
  rules: {
    orderStatus: [
      { required: true, message: "订单状态1：待接单2：已接单3：已上车4：待支付5：已支付6；已结束7：待评价不能为空", trigger: "change" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);


/** 查询实时订单列表 */
function getList() {
  loading.value = true;
  listRealTime(queryParams.value).then(response => {
    RealTimeList.value = response.data.rows;
    total.value = response.data.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    realtimeId: null,
    userId: null,
    userTel: null,
    orderCard: null,
    startPoint: null,
    startPointLongitude: null,
    startPointLatitude: null,
    destination: null,
    destinationLongitude: null,
    destinationLatitude: null,
    distance: null,
    createTime: null,
    driverId: null,
    startTime: null,
    endTime: null,
    predictPrice: null,
    realPrice: null,
    orderStatus: null
  };
  proxy.resetForm("RealTimeRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.realtimeId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加实时订单";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _realtimeId = row.realtimeId || ids.value
  getRealTime(_realtimeId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改实时订单";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["RealTimeRef"].validate(valid => {
    if (valid) {
      if (form.value.realtimeId != null) {
        updateRealTime(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addRealTime(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _realtimeIds = row.realtimeId || ids.value;
  proxy.$modal.confirm('是否确认删除实时订单编号为"' + _realtimeIds + '"的数据项？').then(function() {
    return delRealTime(_realtimeIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('orders/RealTime/export', {
    ...queryParams.value
  }, `RealTime_${new Date().getTime()}.xlsx`)
}


getList();


</script>

<!--<style>-->
<!--#container {-->
<!--  width: 60%;-->
<!--  height: 400px;-->
<!--}-->
<!--</style>-->
